<template>
  <a-modal v-model:visible="visible" :ok-text="'确定'" :cancel-text="'取消'" :width="'60%'" title="发布PDK需求" @cancel="handleCancel" @ok="handleOk">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="需求名称：" v-bind="validateInfos.name">
        <a-textarea v-model:value="formState.name" show-count :maxlength="1000" />
      </a-form-item>
      <a-form-item label="需求描述：" v-bind="validateInfos.desc">
        <a-textarea v-model:value="formState.desc" show-count :maxlength="1000" />
      </a-form-item>
      <a-form-item label="相关资料"> </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, toRaw, defineEmits, defineExpose } from "vue"
import { Form } from "ant-design-vue"

const useForm = Form.useForm
const emit = defineEmits(["onSuccFn", "onFail"])
const visible = ref(false)

const formState = reactive({
  name: "",
  desc: "",
})
const rulesRef = reactive({
  name: [{ required: true, message: "请输入需求名称" }],
  desc: [{ required: true, message: "请输入需求描述" }],
})
const { resetFields, validate, validateInfos } = useForm(formState, rulesRef, {
  onValidate: (...args) => console.log(...args),
})
const labelCol = ref({ style: { width: "100px" } })
const wrapperCol = ref({ span: 24 })

const handleOk = () => {
  validate()
    .then(() => {
      visible.value = false
      emit("onSuccFn", toRaw(formState))
    })
    .catch(err => {
      console.log("error", err)
    })
}
const handleCancel = () => {
  visible.value = false
}
const visibleHide = () => {
  visible.value = true
}

defineExpose({
  visibleHide,
})
</script>
